<template>
	<view class="container">
		<view class="member_info">
			<view class="logo">
				<image class="avatar" :src="avatarUrl" v-if="avatarUrl.length>10"></image>
				<image class="avatar" :src="static+'/logo.png'" v-else></image>
			</view>
			<view class="member_name">
				<view class="nickname" v-if="nickname.length>2">{{nickname.substr(0,12)}}</view>
				<view class="nickname" v-else>谷牧之道会员</view>
				<view class="grade" v-if="grade==1"><image :src="static+'/x.png'"></image>健康管家</view>
				<view class="grade" v-if="grade==2"><image :src="static+'/y.png'"></image>健康顾问</view>
			</view>
			<view class="operate" style="height:105upx;">
				<view class="button" id="0" v-on:click="address">切换地址</view>			
				<view class="button" id="0" v-on:click="receive">一键领取</view>
			</view>
		</view>
		<view class='nav'>
			<view :class='current==0?"font-color":""' class="nav_unit" id='0' v-on:click='operation'>待领取（{{no_sum}}）</view>
			<view :class='current==1?"font-color":""' class="nav_unit" id='1' v-on:click='operation'>已领取（{{sum}}）</view>
		</view>
		<view class="content" v-show="current==0">
			<view class="none" v-if="result[0].length==0">没有待领取记录</view>
			<!-- <block v-for="(item,index) in result[0]" :key="index" v-else> -->
				<view class="order_unit" v-for="(item,index) in result[0]" :key="index" v-else>
					<view class="goods_pic" :style="{height:pic_h}">
						<image class="avatar" :src="item.goods_info.goods_img" v-if="item.goods_info.goods_img.length>10"></image>
						<image mode="widthFix" :src="static+'/logo.png'" v-else></image>
					</view>
					<view class="order_con" :style="{height:pic_h}">
						<view class="goods_name">{{item.goods_info.goods_name}}</view>
						<view class="member_con">{{item.member_info.nickname.substr(0,9)}}<text>{{item.create_time}}</text></view>
						<view class="active">{{item.from}}</view>
					</view>
					<view class="operate" :style="{height:pic_h}">
						<view class="unit_value">×{{item.num}}</view>
						<view class="unit_button" :id="item.get_free_goods_id" v-on:click="receive">领取</view>
					</view>
				</view>
			<!-- </block> -->
		</view>
		<view class="content" v-show="current==1">
			<view class="none" v-if="result[1].length==0">没有已领取记录</view>
			<view class="order_unit" v-for="(item,index) in result[1]" :key="index" v-else>
				<view class="goods_pic" :style="{height:pic_h}">
					<image class="avatar" :src="item.goods_info.goods_img" v-if="item.goods_info.goods_img.length>10"></image>
					<image mode="widthFix" :src="static+'/logo.png'" v-else></image>
				</view>
				<view class="order_con" :style="{height:pic_h}">
					<view class="goods_name">{{item.goods_info.goods_name}}</view>
					<view class="member_con">{{item.member_info.nickname.substr(0,9)}}<text>{{item.create_time}}</text></view>
					<view class="active">{{item.from}}</view>
				</view>
				<view class="operate" :style="{height:pic_h}">
					<view class="unit_value">×{{item.num}}</view>
					<view class="none_unit_button">已领取</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style>
	page{background: #F4F4F4;}
	.container{width:100%;}
	.nav{width:100%;height: 80upx; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.nav_unit{width: 50%;height: 80upx;line-height: 80upx;  font-size: 28upx;text-align: center;}
	.font-color{color: #3de9c7;border-bottom:2px solid #3de9c7;}
	.content{width: 100%;}
	/***********************************/
	.member_info{width:92%;margin:10upx 2%;padding:30upx 2%;border-radius: 20upx;
	             display: flex;justify-content: space-between;align-items: center;background: #FFFFFF;}
	.logo{width:100upx;height: 100upx;border-radius: 50upx;overflow: hidden;background: #FFFFFF;}
	.avatar{width:100upx;height: 100upx;}
	.member_name{margin-left:3%;width:57%;display: flex;justify-content: space-between;align-items: flex-start;flex-direction: column;height: 90upx;}
	.nickname{font-size:28upx;}
	.grade{padding:8upx 20upx;display:flex;justify-content: flex-start;align-items: center;
	       text-align: center;height: 30upx;line-height:30upx;;border-radius: 20upx;background: #e8c99c;font-size:24upx;}
	.grade image{width:25upx;height:25upx;}
	.button{background-image: linear-gradient(to right,#43eac9,#24c3a4);width:100%;color: #FFFFFF;
	        text-align: center;font-size: 26upx;line-height: 50upx;height: 50upx;border-radius: 25upx;}
	/***********************************/
	.none{width:100%;height: 80upx;line-height: 80upx;text-align: center;font-size: 28upx;}
	.order_unit{width:92%;margin:10upx 2%;padding:10upx 2%;background:#FFFFFF;display: flex;justify-content: space-between;align-items: center;border-radius: 10upx;}
	.goods_pic{width:20%;overflow: hidden;padding-right:2.5%;}
	.goods_pic image{width:100%;}
	.order_con{width:55%;flex-direction: column;display: flex;justify-content: space-between;align-items: flex-start;}
	.goods_name{font-size: 28upx;color: #333333;}
	.member_con{font-size: 24upx;color: #999999;}
	.member_con text{padding-left:15upx;}
	.active{font-size: 24upx;color: #666666;}
	.operate{width:22.5%;display: flex;flex-direction: column;display: flex;justify-content: space-between;align-items: flex-end;}
	.unit_value{font-size: 24upx;color: #333333;line-height: 50upx;}
	.unit_button{background-image: linear-gradient(to right,#43eac9,#24c3a4);width:80%;color: #FFFFFF;text-align: center;font-size: 26upx;line-height: 50upx;height: 50upx;border-radius: 25upx;margin-top:20upx;}
	.none_unit_button{background-image: linear-gradient(to right,#aaa,#ccc);width:80%;color: #FFFFFF;text-align: center;font-size: 26upx;line-height: 50upx;height: 50upx;border-radius: 25upx;margin-top:20upx;}
</style>
<script>
	export default {
		data() {
			return {
				current: 0,
				pic_h:'',
				avatarUrl:'',
				nickname:'',
				sum:0,
				no_sum:0,
				result:[[],[]],
				start:[0,0],
				address_id:0,
				member:{},
				grade:0,
				submit_status:1,
				refresh_status:0,
				url: getApp().globalData.url,
				static:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.pic_h = w*0.92*0.20+"px";
			this.avatarUrl = uni.getStorageSync("avatarUrl");
			this.nickname  = uni.getStorageSync("nickname");
			this.grade     = uni.getStorageSync("grade");
			this.initialize();
		},
		onShow() {
			var address_id = uni.getStorageSync("address_id");
			if(address_id!='')
			{
				this.address_id = address_id;
			}
		},
		onPullDownRefresh() {
			this.refresh_status = 1;
			this.initialize();
		},
		onReachBottom(){
			this.initialize();
		},
		methods: {
			address:function()
			{
				uni.navigateTo({
					url:"address"
				})
			},
			receive:function(e)
			{
				var that = this;
				var id = e.currentTarget.id;
				var member_id = uni.getStorageSync("member_id");
				console.log(id);
				// console.log(this.member.address_info.address_id);
				if(this.address_id>0)
				{
					var address_id = this.address_id;
					uni.request({
						url: this.url+'/wechat_get_adviser_gift', 
						data: {member_id:member_id,get_free_goods_id:id,address_id:address_id},
						header: {'Content-Type': 'application/json'},
						success: (res) => {
							if(res.data.status==1)
							{
								uni.showToast({
									title:"领取成功",
									duration:1500
								})
								var tmp = {};
								for(var i=0;i<that.result[0].length;i++)
								{
									if(that.result[0][i].get_free_goods_id==parseInt(id))
									{
										tmp = that.result[0][i];
										that.result[0].splice(i,1);
									}
								}
								that.result[1].push(tmp);
							}
							else
							{
								uni.showModal({
									title:"领取提示",
									content:res.data.msg,
									showCancel:false
								})
							}
						}
					});
				}
				else
				{
					uni.showModal({
						title:"领取提示",
						content:"地址不能为空\r\n请选择默认地址",
						success: (res) => {
							if(res.confirm)
							{
								uni.navigateTo({
									url:"address"
								})
							}
						}
					})
				}
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				// var member_id = 169015;
				var st = this.current;
				uni.request({
					url: this.url+'/wechat_gift_list', 
					data: {member_id:member_id,status:st,start:this.start[st]},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res);
						that.sum    = res.data.get_sum;
						that.no_sum = res.data.no_get_sum;
						that.member = res.data.my_info;
						that.address_id = res.data.my_info.address_info.address_id;
						if(res.data.status==1)
						{
							that.start[st] += 10;
							for(var k=0;k<res.data.result.free_goods.length;k++)
							{
								that.result[st].push(res.data.result.free_goods[k]);
							}
						}
						if(that.refresh_status==1)
						{
							that.refresh_status = 0;
							uni.stopPullDownRefresh();
						}
					}
				});
			},
			operation:function(e)
			{
				var id = e.currentTarget.id;
				this.current = parseInt(id);
				this.initialize();
			}
		}
	}
</script>


